<template>
  <div>
    <span style="display: flex; width: 100%;">
      <el-button type="primary"
          @click="cleanform(fromRuleRef), dialogFormVisible = true, dialog_title = '新增订单项'">新增</el-button>
        <el-button type="danger" @click="DelList">批量删除</el-button>
        <el-input v-model="query" style="max-width: 400px;margin-left: 10px;" placeholder="Please input"
          class="input-with-select">
          <template #prepend>
            <el-select v-model="select" placeholder="流水线名称" style="width: 115px">
              <el-option v-for="item in ['流水线名称', '订单项编号']" :key="item.indexOf" :label="item" :value="item" />
            </el-select>
          </template>
          <template #append>
            <el-button :icon="Search" @click="selectbut" />
          </template>
        </el-input>
    </span>
    <el-table style="margin-top:10px;" border :data="tableData" max-height="80vh" width="100vw"
      @selection-change="handleSelectionChange">
      <el-table-column fixed type="selection" width="45" />
      <el-table-column fixed prop="lineId" label="流水线编号" width="120" />
      <el-table-column prop="name" label="流水线名称" width="120" />
      <el-table-column prop="orderItemId" label="生产中订单项编号" width="160" />
      <el-table-column label="更新时间" width="200" >
        <template #default="scope">
          {{ GetDateTime(scope.row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述" width="300" />
      <el-table-column fixed="right" label="Operations" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="Del(scope.$index)">
            删除
          </el-button>
          <el-button link type="primary" size="small"
            @click="Updata(scope.$index)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%; margin-top: 10px;">
      <el-pagination style="margin: auto; width: 600px;" v-model:current-page="currentPage" v-model:page-size="pageSize"
        :page-sizes="[5, 10, 50, 100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <el-dialog v-model="dialogFormVisible" :title="dialog_title" width="600">
      <el-form :model="form" :rules="rules" ref="fromRuleRef">
        <el-form-item label="流水线名称" :label-width="120" prop="name">
          <el-input v-model="form.name" placeholder="请输入流水线名称"  autocomplete="off" />
        </el-form-item>
        <el-form-item label="生产中订单项" :label-width="120"  prop="order">
          <el-input v-model="form.orderItemId"  placeholder="请输入生产中订单项" autocomplete="off" />
        </el-form-item>
        <el-form-item label="描述" :label-width="120" prop="description">
          <el-input type="textarea" v-model="form.description"  autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cleanform(fromRuleRef)">取消</el-button>
          <el-button type="primary" @click="Add(fromRuleRef)">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { onBeforeMount, ref, reactive } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { getAllAssemblyLine, addAssemblyLine, updateAssemblyLine, removeAssemblyLine, removeAssemblyLines } from "../../request/apis/AssemblyLineApi";
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import {GetDateTime} from "../../utils/storage"
onBeforeMount(() => {
  updateData()
})
const form = reactive({
  lineId: 0,
  name: "",
  orderItemId: "",
  description: "",
})
const fromRuleRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入流水线名称", trigger: "blur" },
  { min: 2 , max: 16, message: '长度在2到16上', trigger: 'blur' }],
});
let dialog_title=''
let iupdate = false
const cleanform =async(ruleFrom: FormInstance | undefined) => {
  dialogFormVisible.value = false
  iupdate = false
  form.name = ""
  form.orderItemId = ""
  form.description = ""
  if (!ruleFrom) return
  ruleFrom.resetFields()
}
const query = ref("")
const dialogFormVisible = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const select = ref("")
const tableData = ref([])

const selectbut = () => {//查询
  updateData()
}


let dellist:[] = []
const handleSelectionChange = (val: []) => {//选择框变化
  dellist = val
}
const Updata = (id: number) => {
  let obj = tableData.value[id]
  form.lineId = obj.lineId
  form.name = obj.name
  form.orderItemId = obj.orderItemId
  form.description = obj.description
  dialogFormVisible.value = true
  iupdate = true
}

const Add = async(ruleFrom: FormInstance | undefined) => {
  if (!ruleFrom) return;
  await ruleFrom.validate((valid, fields) => {
    if (valid) {
      dialogFormVisible.value = false
      if (iupdate) {
        updateAssemblyLine(form).then(res => {
          if (res.code == 200) {
            ElMessage({
              message: '修改成功',
              type: 'success',
            })
          } else {
            ElMessage.error(res.message)
          }
          updateData()
          iupdate = false
        })
      } else {
        addAssemblyLine(form).then(res => {
          if (res.code == 200) {
            ElMessage({
              message: '添加成功',
              type: 'success',
            })
          } else {
            ElMessage.error(res.message)
          }
          updateData()
        })
      }
    } else {
      return;
    }
  });
}
const updateData = () => {//刷新数据
  let query1:String="",query2=-1
  if (select.value.endsWith("订单项编号")) {
      query2 = Number.parseInt(query.value)
    } else {
      query1 = query.value
    }
  getAllAssemblyLine(pageSize.value, currentPage.value,query1,query2).then((res) => {
    if (res.data == null) return
    tableData.value = res.data.list
    currentPage.value = res.data.currPage
    totalCount.value = res.data.totalCount
    console.log( tableData.value)
  })
}
const Del = (id: number) => {//删除
  removeAssemblyLine(tableData.value[id].lineId).then(res => {
    if (res.code == 200) {
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
    } else {
      ElMessage.error(res.message)
    }
    updateData()
    cleanform(undefined)
  })
}
const DelList = () => {//批量删除
  let ids:[] =dellist.map(person => person.lineId)
  if (ids.length == 0) return
  removeAssemblyLines(ids).then((res => {
    if (res.code == 200) {
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
    } else {
      ElMessage.error(res.message)
    }
    updateData()
  }))
}




const handleSizeChange = (val: number) => {
  updateData()
}
const handleCurrentChange = (val: number) => {
  updateData()
}

</script>

<style></style>
